<!--
* @author wn
* @date 2022/04/18 14:51:27
* @description: 头部组件的 组件导航
!-->
<template>
	<ul class="app-header-nav">
		<li class="home">
			<router-link to="/">首页</router-link>
		</li>
		<!-- 相当hover
		跳转时 可能鼠标正好还是落在 a 上 弹层重复弹出 改为移动弹出
		-->
		<li
			v-for="item in list"
			:key="item.id"
			@mousemove="setOpen(item.id, true)"
			@mouseleave="setOpen(item.id, false)"
		>
			<!-- 导航一级 分类 	-->
			<router-link
				:to="`/category/${item.id}`"
				@click="setOpen(item.id, false)"
			>
				{{ item.name }}
			</router-link>
			<!-- 二级导航 弹出层 "-->
			<div class="layer" :class="{ open: item.open }">
				<ul>
					<li v-for="sub in item.children" :key="sub.id">
						<!-- 导航二级 分类 -->
						<router-link
							:to="`/category/sub/${sub.id}`"
							@click="setOpen(item.id, false)"
						>
							<img :src="sub.picture" alt="" />
							<p>{{ sub.name }}</p>
						</router-link>
					</li>
				</ul>
			</div>
		</li>
	</ul>
</template>
<script>
import { computed } from 'vue'
import { useStore } from 'vuex'
export default {
	name: 'AppHeaderNav',
	setup() {
		const store = useStore()
		// vuex中 列表分类
		const list = computed(() => store.state.category.list)
		// 通过数据控制 点击a标签 弹出层的显示隐藏
		// vuex 每一个分类添加 open数据
		const setOpen = (id, isOpen) => {
			store.commit('category/setOpen', [id, isOpen])
		}
		return { list, setOpen }
	},
}
</script>
<style scoped lang="less">
.app-header-nav {
	display: flex;
	justify-content: space-around;
	position: relative;
	width: 820px;
	padding-left: 40px;
	// 遮住 homePage
	z-index: 998;
	> li {
		margin-right: 40px;
		width: 38px;
		text-align: center;
		> a {
			display: inline-block;
			height: 32px;
			font-size: 16px;
			line-height: 32px;
		}
		// 对 li 的 hover 效果  li没有高度 由 a 和 layer 撑开
		&:hover {
			> a {
				color: @xtxColor;
				border-bottom: 1px solid @xtxColor;
			}
			// 弹出 layer  通过类名控制
			// .layer {
			// 	height: 132px;
			// 	opacity: 1;
			// }
		}
	}
	// 二级导航 弹出层
	.layer {
		// 弹出 layer  通过类名控制
		&.open {
			height: 132px;
			opacity: 1;
		}
		position: absolute;
		top: 56px;
		left: -200px;
		width: 1240px;
		height: 0;
		opacity: 0;
		background-color: #fff;
		// layer 高度为0 ul 高度为132px 不显示弹层时  要溢出隐藏 才可以
		overflow: hidden;
		box-shadow: 0 0 5px #ccc;
		// 过渡时间  延时时间
		transition: all 0.2s 0.1s;
		ul {
			display: flex;
			flex-wrap: wrap;
			height: 132px;
			padding: 0 70px;
			align-items: center;
			a {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 110px;
				img {
					width: 60px;
					height: 60px;
				}
				p {
					padding-top: 10px;
				}
				&:hover {
					color: @xtxColor;
				}
			}
		}
	}
}
</style>
